<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="image in images" :key="image.bannerid">
                <img :src="image.img" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script lang='ts' setup>
import { bannerList } from '@/service/api';
import { ref, onMounted } from 'vue';
let images = ref<Banner[]>();
type Banner = {
    img: string,
    alt: string,
    flag: boolean,
    link: string,
    bannerid: string

}
onMounted(async () => {
    const result = await bannerList();
    images.value = result.data.data;
})

</script>
<style lang='less' scoped>
.my-swipe {
    margin-top: 46px;

    :deep(.van-swipe__indicator) {
        background-color: rgb(194, 194, 194);
    }

    .van-swipe-item {
        width: 375px;
        height: 175px;
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>